<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>绝对定位</title>

        <style type="text/css">
            * { border: 1px solid blue ; margin: 25px ; }
            html { border-color: red ; position: relative ; }
            body { border-color: green ; position: relative ; }

            /* 选择器分组 或 选择器列表 ( 多个选择器使用逗号隔开，建议每行写一个选择器 )*/
            h3 , 
            p { text-align: center ; border: none ; }

            .outer {
                width: 400px ;
                height: 300px ;
                margin: 25px auto ;
                position: relative ; /* 为了不使用static方式定位当又不想移动元素位置 */
            }

            .middle {
                width: 296px ;
                height: 196px ;
                margin: 50px ;
                border-width: 2px ;
                border-color: purple ;
                position: relative ; /* 为了不使用static方式定位当又不想移动元素位置 */
            }

            .inner { 
                position: absolute ; /* 元素采用绝对定位 */
                right: 10px ;
                bottom: 10px ;
                width: 50% ; /* 采用绝对定位的元素，宽度需要显式设置 */
                height: 100px ;
                margin: 0 ;
                background: #dedede ;
            }

        </style>

    </head>
    <body>

        <h3>测试绝对定位</h3>
        <p>position: absolute 表示生成绝对定位的元素</p>
        <p style="color:red" >
            若采用绝对定位的元素拥有non-static定位的父元素，
            则该元素参照第一个non-static定位的父元素进行定位
        </p>

        <div class="outer">
            <div class="middle">
                <div class="inner">absolute</div>
            </div>
        </div>
        
    </body>
</html>